<template>  
  <div>  
    <h2>新增项目</h2>  
    <form @submit.prevent="addItem">  
      <div>  
        <label for="name">名称:</label>  
        <input type="text" id="name" v-model="newItem.name" required>  
      </div>  
      <div>  
        <label for="description">描述:</label>  
        <textarea id="description" v-model="newItem.description" required></textarea>  
      </div>  
      <button type="submit">新增</button>  
    </form>  
    <h2>已添加的项目</h2>  
    <ul>  
      <li v-for="(item, index) in items" :key="index">  
        {{ item.name }} - {{ item.description }}  
      </li>  
    </ul>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      newItem: {  
        name: '',  
        description: ''  
      },  
      items: []  
    };  
  },  
  methods: {  
    addItem() {  
      if (this.newItem.name && this.newItem.description) {  
        this.items.push({ ...this.newItem });  
        this.newItem = { name: '', description: '' }; // 清空表单  
      } else {  
        alert('请填写完整的名称和描述！');  
      }  
    }  
  }  
};  
</script>